<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <h1>Design your taco!</h1>
 <img th:src="@{/images/TacoCloud.png}"/>

 <form method="post" th:object="${design}">
     <div class="grid">
         <div class="ingredient-group" id="warps">
             <h3>Designate your warp:</h3>
             <div th:each="ingredient : ${warp}">
                 <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                 <span th:text="${ingredient.name}">INGREDIENT</span><br/>
             </div>
         </div>
         <div class="ingredient-group" id="proteins">
             <h3>Pick your protein:</h3>
             <div th:each="ingredient : ${protein}">
                 <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                 <span th:text="${ingredient.name}">INGREDIENT</span><br/>
             </div>
         </div>
         <div class="ingredient-group" id="veggies">
             <h3>Pick your veggies:</h3>
             <div th:each="ingredient : ${veggies}">
                 <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                 <span th:text="${ingredient.name}">INGREDIENT</span><br/>
             </div>
         </div>
         <div class="ingredient-group" id="cheese">
             <h3>Pick your cheese:</h3>
             <div th:each="ingredient : ${cheese}">
                 <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                 <span th:text="${ingredient.name}">INGREDIENT</span><br/>
             </div>
         </div>
         <div class="ingredient-group" id="sauce">
             <h3>Pick your sauce:</h3>
             <div th:each="ingredient : ${sauce}">
                 <input name="ingredients" type="checkbox" th:value="${ingredient.id}"/>
                 <span th:text="${ingredient.name}">INGREDIENT</span><br/>
             </div>
         </div>
     </div>
     <div>

         <h3>Name your taco creation:</h3>
         <input type="text" th:field="*{name}"/>
         <span class="ValaditonError" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">
             Name Error
         </span>
         <br/>

         <input type="submit" value="submit">
     </div>
 </form>
</body>
</html>